<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["commonData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;

          this.getData();
        }
      },
      immediate: true,
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 500);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      let color = ["#93D034", "#47A8F7"];
      //   let xAxisData = ["1", "2", "3", "4", "5", "6", "7", "8"];
      //   let yAxisData1 = [10, 38, 35, 73, 18, 15, 18, 23];
      //   let yAxisData2 = [56, 77, 95, 100, 99, 88, 86, 96.2];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };

      const initOption = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {},
        dataZoom: [
          {
            show: true,
            height: 10,
            xAxisIndex: [0],
            bottom: 60,
            start: 10,
            end: 80,
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        xAxis: {
          type: "category",
          //   data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "#cdd5e2",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#666666",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            // name: "℃",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#cdd5e2",
              },
            },
            axisLabel: {
              formatter: "{value}℃",
              textStyle: {
                color: "#93D034",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            // name: "%",
            nameTextStyle: {
              color: "#666666",
            },
            position: "right",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#cdd5e2",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#47A8F7",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        // visualMap: [
        //       {
        //         show: false,
        //         seriesIndex:0,
        //         pieces: [
        //           {
        //             gt:0,
        //             lte:21,
        //             color:'pink'
        //           },
        //           {
        //             gt: 21,
        //             lte: 22,        
        //             color: '#93D034'
        //           },
        //           {
        //             gt: 22,          
        //             let:100,
        //             color: 'pink'
        //           }
        //           ]
        //       },
        //       {
        //         show: false,
        //         seriesIndex:1,
        //         pieces:[
        //           {
        //             gt:0,
        //             lte:90,
        //             color:'#e91642'
        //           },
        //           {
        //           gt: 90,
        //           lte: 140,          
        //           color: '#EBEBBE'
        //         }, {
        //           gt: 140,          
        //           let:200,
        //           color: '#e91642'
        //         }]
        //       }
        //     ],
        series: [
          {
            // name: "2018",
            name: "相对温度",
            type: "line",
            // smooth: true,
            smooth: false,
            symbolSize: 0,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 0,
                shadowColor: 0,
                shadowOffsetY: 0,
              },
            },
            itemStyle: {
              normal: {
                color: color[0],
              },
            },
            symbol: "circle", //数据交叉点样式
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1),
                    },
                  ],
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: color[0],
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
            // data: yAxisData1,
          },
          {
            name: "相对湿度",
            type: "line",
            // smooth: true,
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false,
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8,
              },
            },
            itemStyle: {
              normal: {
                color: color[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: hexToRgba(color[1], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[1], 0.1),
                    },
                  ],
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: color[1],
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
            // data: yAxisData2,
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    getData() {
      var that = this;

      setTimeout(() => {
        that.updateChart();
        // that.updateChart();
      }, 800);
    },
    updateChart() {
      var data = this.allData;
      //   var temUpperLimit=18
      //   var temLowerLimit=22

      console.log(data);
      this.xDatas = [];
      var temperature = [];
      var humidity = [];
      data.map((item) => {
        this.xDatas.push(item.F_Createdates);
        temperature.push(item.fTemperature.substr(1, 4));
        humidity.push(item.fHumidity.substr(1, 4));
      });
      // var updateData = null
      // if (data.length > 0 && data != undefined) {
      //     updateData = [data[0].F_WaterActualValue, data[0].F_Cement1ActualValue, data[0].F_Cement2ActualValue, data[0].F_Aggregate1ActualValue, data[0].F_Aggregate2ActualValue, data[0].F_Aggregate3ActualValue, data[0].F_Aggregate4ActualValue, data[0].F_Aggregate5ActualValue, data[0].F_OreActualValue, data[0].F_FlyashActualValue, data[0].F_Admixture1ActualValue, data[0].F_Admixture2ActualValue]
      // } else {
      //     updateData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      // }

      // const value = updateData;
      var dataOption = {
        xAxis: {
          // data: ['C10', 'C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'C60', 'other'],//数据
          data: this.xDatas,
        },
     
        series: [
          {
            data: temperature, //温度
          },
          {
            data: humidity, // 盘数
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>
